<template>
	<view class="page page-addresslist">
		<view v-if="dataList.length>0">
			<view  class="cusCard" v-for="(item, index) in dataList" :key="index">
				<view class="cu-form-group" @click="goOrderForm" :data-item="item">
					<view class="margin-bottom-sm">
						<text class="text-label">车牌号：</text>
						<text>{{ item.LicensePlateNO }}</text>
					</view>
					<view class="text-gray margin-bottom">
						<text class="text-label">车型：</text>
						<text>{{ item.TruckType }}</text>
					</view>	
				</view>
				<view class="cusCard-footer padding-top">
					<view class="flex justify-end">
						<view class="cbtn-edit margin-right"
						 @click="showModal"
						  :data-item="item" data-type="edit">
							<text class="lg text-gray cuIcon-edit"></text>
							<text class=" padding-left-xs">编辑</text>
						</view>
						<view class="cbtn-delete" @click="del" :data-id="item.UserTruckID">
							<text class="lg text-gray cuIcon-delete"></text>
							<text class=" padding-left-xs">删除</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="haveNOList" v-else><view class="haveNOList-view">
			暂无数据
		</view></view>

		<view class="cusfooter">
			<view class="cusfooter-item"><button @click="showModal" data-type="add" class="cu-btn round lg bg-blue cusbtn">新增车辆</button></view>
		</view>

		<!-- 弹窗 -->
		<view class="cu-modal"  :class="modalName == 'truck' ? 'show' : ''">
			<view class="cu-dialog cus-dialog">
				<view class="cu-bar dialog-header">
					<view class="dialog-title">{{ handleType=='add'?'新增车辆':'编辑车辆' }}</view>
					<view class="action" @tap="hideModal"><text class="cuIcon-close text-red"></text></view>
				</view>
				<view class="dialog-con">
					<view class="input-row border " >
						<text class="title title-require">车牌号：</text>
						<input type="text" v-model="truckInfo.LicensePlateNO" placeholder="请输入"  style="height: 80upx;text-align: left;padding-left: 34upx;"
						:disabled="handleType=='edit'"   :class="[handleType=='edit'?'gray':'']"   >
						</input>
					</view>
					<view class="input-row border">
						<text class="title title-require">车型：</text>
						<picker
							@change="bindPickerChange"
							class="cuspicker"
							range-key="DataValue"
							:value="ch_index.TruckType"
							:range="truckType_list"
							data-type="TruckType"
							data-state="truckInfo"
							data-list="truckType_list"
						>
							<view class="picker cuspicker_item">{{ ch_index.TruckType ? truckType_list[ch_index.TruckType].DataValue : truckInfo.TruckType || '请选择' }}</view>
						</picker>
					</view>
				</view>
				<view class="cu-bar bg-white justify-end dialog-footer">
					<view class="cus-btn" @tap="hideModal">取消</view>
					<view class="cus-btn text-blue" @tap="saveInfo">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getContactUrl } from '@/config.js';
import mInput from '@/components/m-input.vue';
export default {
	components: {
		mInput
	},
	data() {
		return {
			session: {},
			dataList: [],
			modalName: null,
			truckInfo: {
				LicensePlateNO: '',
				TruckType: '',
				OpenID: '',
			},
			truckType_list: [{ DataCode: '', DataValue: '' }],
			ch_index: { TruckType: 0 },
			handleType:'add'
		};
	},
	onLoad(){
		
	},
	mounted() {
		//获取车型
		this.$store.dispatch('uni/Config', { dataType: 3 }).then(res => {
			this.truckType_list = res;
		});
		this.session = uni.getStorageSync('session') || {};
		this.getTruckInfo();
	},
	
	methods: {
		getTruckInfo() {
			uni.showLoading({
			    title: '加载中'
			});
			this.$store
				.dispatch('uni/GetTruckList', {
					openid: this.session.openid
				})
				.then(res => {
					this.dataList = res.Data || [];
					if (this.dataList.length === 0) {
						uni.showToast({
							title: '暂无车辆数据',
							duration: 2000
						});
					}
					uni.hideLoading()
				}).catch(()=>uni.hideLoading());
		},

		bindPickerChange(e) {
			const { type, state, list } = e.currentTarget.dataset;
			this.ch_index[type] = e.detail.value;
			this[state][type] = this[list][e.detail.value].DataCode; //提交后台的code
		},
		del(e) {
			const { id } = e.currentTarget.dataset;
			uni.showModal({
				content: `确认删除这条数据吗？`,
				success: e => {
					if (e.confirm) {
						this.$store
							.dispatch('uni/DelTruck', {
								userTruckID:id
							})
							.then(res => {
								uni.showToast({
									title:res.Message
								})
								this.getTruckInfo();
							});
					}
				}
			});
		},
		hideModal() {
			this.truckInfo = {};
			this.modalName = null;
			this.ch_index.TruckType = ''
		},
		showModal(e) {
			const  {type,item} = e.currentTarget.dataset;
			this.modalName = 'truck';
			this.handleType = type;
			if (type==='edit') {
				this.truckInfo = item;
				let index = 0;
				this.truckType_list.forEach((v,i)=>{
					if(v.DataCode===item.TruckType){
						index = i;
						return;
					}
				})
			this.ch_index.TruckType = index;
			} else {
				this.truckInfo = {};
			}
		},
		saveInfo() {
			let params = {...this.truckInfo};
			let url = 'uni/AddTruck';
			if (this.handleType === 'add') {
				params.OpenID = this.session.openid;
			} else {
				url = 'uni/ModifyTruck';
			}
			const {LicensePlateNO,TruckType} = this.truckInfo;
			if(LicensePlateNO){
				if(!(/^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/.test(LicensePlateNO))){
					uni.showToast({
						title:'请填写正确的车牌号码',
						icon:'none'
					})
					 return; 
				}
			}
			if (LicensePlateNO && TruckType) {
			this.$store
				.dispatch(url, params)
				.then(res => {
					if(res.Code===0){
						uni.showToast({
							icon:'none',
							title: res.Message,
							duration: 1000
						});
						this.getTruckInfo();
						this.hideModal()
					}else{
						uni.showModal({
							title:'提示',
							content:res.Message,
							showCancel:false
						})
					}
				});
			} else {
				uni.showToast({
					icon:'none',
					title: '请输入车辆信息',
					duration: 1500
				});
			}
			
			
		}
	}
};
</script>

<style lang="scss" scoped>
.page-addresslist {
	padding-bottom: 70px;
}

.cusCard {
	padding: 20px;
	background-color: #fff;
	border-radius: 10px;
	margin-bottom: 10px;

	&-footer {
		border-top: 1px solid #e1dede;
	}
}

.cusfooter {
	position: fixed;
	bottom: 0;
	width: 100%;
	background-color: #fff;
	padding: 10px;
	border-top: 1px solid #f4f4f4;

	&-item {
		margin: 0 auto;
		display: flex;
		justify-content: center;
		width: 50%;

		.cusbtn {
			width: 100%;
		}
	}
}

.cus-dialog {
	.dialog-header {
		background-color: #fff;
		position: relative;
		.dialog-title {
			text-align: center;
			width: 100%;
		}
		.action {
			position: absolute;
			right: -5px;
			top: -5px;
		}
	}

	.dialog-con {
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		/deep/.m-input-view {
			text-align: left;
		}
		.cu-form-group picker,
		.cuspicker {
			text-align: left;
			width: 100%;
			height: 100%;
			padding-left: 30px;
		}
		.gray{
			width: 100%;
			background-color: #F5F5F5;
			border: 1px solid #D9D9D9;
			border-radius: 5px;
			color: #B8B8B8;
			//height: 60upx;
			//line-height: 60upx;
			text-align: center;
			align-items: center;
		} 
	}

	.dialog-footer {
		width: 100%;

		.cus-btn {
			width: 50%;
			box-sizing: border-box;
		}
		.cus-btn:first-child {
			border-right: 1px solid #ccc;
		}
	}
}

.cu-form-group {
	/deep/ input {
		text-align: left;
	}
}
.haveNOList{
	display: flex;
	text-align: center;
	
	&-view {
		top: 300upx;
		width: 100%;
		height: 300upx;
		line-height: 300upx;
		font-size: 16px;
		
	}
}
.cus-dialog{
	background: #FFFFFF;
}
.input-row {
	margin-top: 10px;
}

</style>
